<template>
    <div id="videoDivContainer" >
        <van-image fit="fill" :src="'//' + live.previewPicture">
            <template v-slot:loading>
                <van-loading type="spinner" size="200" />
            </template>
        </van-image>
    </div>
</template>

<script>
const testM3u8 = (stream, callback) => {
    if(!stream) {
        callback(false);
    }
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {// 服务器返回值的处理函数，此处使用匿名函数进行实现
        if (xhr.readyState == 4 && xhr.status == 404) {
            callback(false)
        } else if (xhr.readyState == 4 && xhr.status == 200) {
            callback(true)
        }
    };
    xhr.open("GET", stream, true);
    xhr.send(null)
}

export default {
    props: ['live'],
    data() {
        return {
            player: null,
            isPlaying: false,
            timer: {}         
        }
    },
    watch: {
        'live': {
            deep: true, // 深度监听设置为 true
            handler: function(newV,oldV){
              if(newV) {}
            }
        }
    },
    mounted() {
        this.timer = setInterval(testM3u8, 1000, this.live.pullStreamUrl, this.getStream)
    },
    beforeDestroy() {
        this.destroyPlayer();
    },
    methods: {
        getStream(flag) {
            console.log("是否在推流====" +flag)
            console.log("播放器是否已初始化====" +this.player)
            console.log("是否在播放====" +this.isPlaying)
            if(flag && !this.player) {
                this.initPlayer()
            }
        },
        initPlayer() {
            let videoDiv = document.getElementById('videoDivContainer')
            videoDiv.innerHTML = `<video id="cdn-video-container" playsinline webkit-playsinline></video>`
            
            this.player = TCPlayer('cdn-video-container', {
                controls: true,
                autoplay: false,
                poster: '//' + this.live.previewPicture,
                languages:{
                    "zh-cn":{
                        "A network error caused the media download to fail part-way.": "直播暂未开始，请稍后再试。"
                    }
                }
            });
            this.player.src(this.live.pullStreamUrl);
            this.playerListener();
            document.getElementById('cdn-video-container').style.width = '100%'
            document.getElementById('cdn-video-container').style.maxWidth = '100%'
            document.getElementById('cdn-video-container').style.height = '0'
            document.getElementById('cdn-video-container').style.paddingTop = '56.25%'
        },
        playerListener() {
            this.player.on('error', () => {
                this.isPlaying = false;
            });
            this.player.on('playing', () => {
                this.isPlaying = true;
            });
        },
        destroyPlayer() {
            this.player && this.player.dispose();
        }
        
    }
}
</script>

<style scoped>
    #player-container-id {
        width: 100%;
        max-width: 100%;
        height: 0;
        padding-top: 56.25%;
    }
    .vjs-poster {
        width: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
    }
</style>
